<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 150px;
            height: 100px;
        }
        #outer{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer">
        <img src="imgs/heart.gif">
    </div>

    <script>
        let dx = 0;
        let dy = 0;

        let x = 10;
        let y = 10;
        
        let outer = document.getElementById("outer");
        let divH = outer.offsetHeight;
        let divW = outer.offsetWidth;

        // 设置body的高度
        // alert(document.body.clientHeight)
        let bodyH = document.documentElement.clientHeight;
        let bodyW = document.body.clientWidth;

        function move(){
            //到达底部   div高度+div距离上边的高度>=网页的可见区域的高度
            if(divH + dy>=bodyH || dy<0){
                y*=-1;
            }
            if(divW + dx >=bodyW || dx<0){
                x*=-1
            }
            dx+=x;
            dy+=y;
            outer.style.left=dx+"px";
            outer.style.top=dy+"px";
        }
        let dt = setInterval(move,50);

        outer.onmouseover=function(){
            clearInterval(dt);
        }
        outer.onmouseout=function(){
            dt = setInterval(move,50);
        }
    </script>
</body>
</html>